<template>
  <view class="team-content">
    <view class="works">
      <view class="works-classification">
            <cover-view class="overlay" :class="{ 'slide-right': isSlideRight }" style=" transition: transform 1s; ">
            </cover-view>
            <view class="classification" :class=" index === defIndex ? 'clickItem' :''" 
             @click="slideOverlay(index)" :key="item.text" v-for="(item,index) in classifications">{{item.text}}</view>
      </view>
    </view>
    <view class="team-info">
        <view class="team-item  r-b">
            <view>{{ (incomeCount.teamIncomeDay / 100).toFixed(2) }}</view>
            <view class="team-title">今日预估</view>
        </view>
        <view class="team-item r-b">
            <view>{{(incomeCount.teamIncomeYDay / 100).toFixed(2)}}</view>
            <view class="team-title">昨日预估</view>
        </view>
        <view class="team-item ">
            <view>{{(incomeCount.teamIncomeCount / 100).toFixed(2) }}</view>
            <view class="team-title">全部收益</view>
        </view>
    </view>

    <view class="select-type">
          <view class="select-tip">{{classifications[defIndex].text}}</view>
    </view>
    <view class="content-body">
      <fui-list v-if="teamIncomeInfo && teamIncomeInfo.length > 0">
        <fui-list-cell  v-for="item in teamIncomeInfo" :key="item.realname">
          <view class="avatar-view">
            <fui-avatar :src="item.avatar ?`${env.cos}${item.avatar}` : 'https://img1.baidu.com/it/u=51612107,1438725902&fm=253&fmt=auto?w=500&h=500'"></fui-avatar>
            <text>{{item.realname}}</text>
          </view>
          <text class="fui-text__explain">{{defIndex === 0 ? (item.userCode || item.user_code) 
          : item.totalTeamIncome ?  (item.totalTeamIncome / 100).toFixed(2) : item.total_team_income ? (item.total_team_income/100).toFixed(2) : 0  }}</text>
        </fui-list-cell>
      </fui-list>
        <NoData v-else="!teamIncomeInfo" />
    </view>
  </view>

</template>

<script setup lang="ts">
import NoData from "@/components/NoData/NoData.vue";
import dyUserPlayingService from "@/api/dyUserPlayingService";
import env from '@/config/env'

const isSlideRight = ref(false)
const defIndex = ref(0)
const pageNo = ref(1)
const pageSize = ref(10)
const reachStatus = ref(true)
const teamIncomeInfo = ref()
const slideOverlay = (index:number)=>{
  if(defIndex.value !==index){
    isSlideRight.value = !isSlideRight.value 
    defIndex.value = index
  }
  pageNo.value = 1
}
const incomeCount = ref({
  teamIncomeCount:0,
  teamIncomeDay:0,
  teamIncomeYDay:0
})
const classifications = ref([
    {
        text:'团队成员'
    }
    ,
    {
        text:'团队收益'
    }
])

const getTeamIncomeCount = async ()=>{
  const {success,result} = await dyUserPlayingService.getTeamIncomeCount()
  if(success){
    incomeCount.value = result
  }
}

const getTeamIncome = async ()=>{

  if(reachStatus.value){
    uni.showLoading()
    const {success,result} = await dyUserPlayingService.getTeamIncome({
      pageNo:pageNo.value,
      pageSize:pageSize.value
    })
    if(success){
      teamIncomeInfo.value ? teamIncomeInfo.value = teamIncomeInfo.value.concat(result) : teamIncomeInfo.value = result 
      pageNo.value +=1;
      if(result.length < pageSize.value){
        reachStatus.value = false
      }
      uni.hideLoading()
    }
  }
}

const getTeamInformation = async ()=>{
  const {success,result} = await dyUserPlayingService.getTeamInformation({
    pageNo:pageNo.value,
    pageSize:pageSize.value
  })
  if(success){
    teamIncomeInfo.value = result
  }
}
onReachBottom(()=>{
  getTeamIncome()
})
onLoad(async()=>{
  await getTeamIncomeCount()
  await getTeamIncome()
})

</script>

<style lang="scss" scoped>
.team-content{
  padding: 28rpx;
  .works{
    padding: 28rpx;
    background: rgb(133,117,240);
    border-radius: 15rpx;
    .works-classification{
        display: flex;
        border-radius: 30rpx;
        background: rgb(75, 58, 168);
        padding:20rpx 0;
        color: white;
        position: relative; /* 添加相对定位 */
        .overlay{
            position: absolute; /* 绝对定位，覆盖在 works-classification 上方 */
            bottom: 0;
            left: 0;
            width: 50%;
            height: 50rpx;
            background: rgb(207, 202, 255);
            z-index: 10; 
            border-radius: 30rpx; 
            height: 100%;
        }
        .classification{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200rpx;
            z-index: 11; 
        }
        .clickItem{
          color: rgb(48,38,106);
        }
        .slide-right {
            transform: translateX(100%); /* 将 overlay 向右移动100%宽度 */
        }

    }
  }
  .team-info{
    display: flex;
    justify-content: space-between;
    .team-item{
      font-size: 28rpx;
      text-align: center;
      margin-top: 30rpx;
      width: 33%;
      .team-title{
        font-size: 23rpx;
        color: $uni-text-color-disable;
        margin-top: 6rpx;
      }
    }
    .r-b{
      border-right: solid 1rpx $uni-border-color;
    }
  }
  .select-type{
    border-left: 6rpx solid #8189ff;
    height: 32rpx;
    display: flex;
    margin-top: 28rpx;
    justify-content: space-between;
    align-items: center;
    padding: 0 10rpx;
    .select-tip{
      font-weight: bolder;
      font-size: 35rpx;
    }
  }
  .avatar-view{
    display: flex;
    justify-content: center;
    align-items: center;
    text{
      margin-left: 8rpx;
      font-size: 28rpx;
    }
  }
  .fui-text__explain{
    font-size: 25rpx;
  }
}
</style>
